<template>
    <div>
        <div ref="textRef" :class="{ 'line-clamp': !isExpand }">
            <div class="">
                <slot />
            </div>
        </div>
        <div v-if="expandVisible" class="text-sky-700" @click="isExpand = !isExpand">
            {{ isExpand ? '收起' : '展开' }}
        </div>
    </div>
</template>
    
<script setup lang='ts'>
withDefaults(
    defineProps<{
        line: number
    }>(),
    {
        line: 2
    }
)

const textRef = ref()
const expandVisible = ref(false);
const isExpand = ref(false);
onMounted(() => {
    expandVisible.value = textRef.value.offsetHeight < textRef.value.scrollHeight
})
</script>
    
<style lang="scss" scoped>
.line-clamp {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: v-bind(line);
}
</style>